@charset "utf-8";
@import url(".css");
*{
	margin:0 0;
	padding: 0;
	font-size: 18px;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"MS Pゴシック"
}
img{
	border: none;
	display: block;
}
ul{
	list-style: none;
}

@media all and (min-width: 521px) {

#wrapper {
	width: 1000px;
	margin: 0 auto;
}
/*ここからヘッダー*/
#header{/*ヘッダー全体　枠*/
	width: 1000px;
	height: auto;
	margin: auto;
}
.header_in{/*ヘッダー　ロゴと問合せ　枠*/
	width: 1000px;
	height: 100px;
	margin-bottom: 50px;
	display: flex;
	justify-content: space-between;
}
#logo{
	max-width: 50%;
	height: auto;
}
#formbutton{/*問合せ枠の部分*/
	width: 150px;
	height: 20px;
	margin: 20px 10px ;
	display: block;
	text-align: center;
	padding: 1rem 3rem;
	border-bottom: 2px solid #0075a9;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	transition: 0.5s;
}
#formbutton a{/*お問合せの文字*/
	font-weight: bold;
	color: #0075a9;
	text-decoration: none;
}
#formbutton:hover {
	color: #fff;
	background: #e8ecf0;
	border-bottom: 2px solid #fff;
	transform: translateY(3px);
}	
.ham-whole{
	display: none;
}
.gnavi_pc ul{/*ナビ4項目　枠*/
	display: flex;
    justify-content:space-between;
	width: 1000px;
	height: 60px;
}
.gnavi_pc a{
	color: #000000;
	text-decoration: none;
}
.li_1{/*シアン　会社概要*/
	background: url("../images/cyaan.jpg");
	background-repeat: no-repeat;
	width: 200px;
	height: 40px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding-top: 5px
}
.li_2{/*マゼンタ　制作事例*/
	background: url("../images/magenta.jpg");
	background-repeat: no-repeat;
	width: 200px;
	height: 40px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding-top: 5px;
}
.li_3{/*イエロー　事業紹介*/
	float: left;	
	background: url("../images/yellow.jpg");
	background-repeat: no-repeat;
	width: 200px;
	height: 40px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding-top: 5px;
}
.li_4{/*ブラック　お問合せ*/
	float: left;
	background: url("../images/brack.jpg");
	background-repeat: no-repeat;
	width: 200px;
	height: 40px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding-top: 5px;
}
}
/*ヘッダー終了*/
/*ここからメイン*/
.Products{
	width: 1000px;
	height: 50px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
	text-align: center;
}
.Products p{
	font-family: "Lobster", "sans-serif";
	font-size: 3.5rem;
	letter-spacing: 0.1rem;
	color: #004098;
	text-shadow: 0 15px 10px rgba(14, 120, 168, 0.295)
}

/*ここからカレンダー*/
.calendar_Wrap{ /*カレンダー全体の枠*/
	width: 900px;
	height: auto;
	margin: auto;
	padding: 20px;
}
.calendar_title{
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 30px;
}
.calendar_box{/*カレンダー（数字）部分の全体枠　1～12月*/
	width: 900px;
	height: auto;
	display: flex;
	justify-content:space-around;
	flex-wrap: wrap;
	border: solid #e4007f 1px;
	background-color:#f4f9ff;/*背景色*/
    border:1px solid #84c1ff;/*枠線*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);/*影*/
    color:#000000;/*文字色*/
}
.calendarStyle01{/*ひと月ごとの枠*/
	width: 200px;
	padding: 5px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);/*影*/
}
td {
	text-align: center;
	font-size: 0.8rem;
}
.holiday{
    color: red;
}
thead td:first-child{/*曜日の段最初の文字（日）*/
    color:red
}
thead td:last-child{/*曜日の段最後の文字（土）*/
    color: blue;
}
tbody td:first-child{/*日にちの段最初の文字*/
    color: red;
}
.holiday{
	color: red;
}
.calendarStyle01:hover {
	transition: all 1.0s ease 0s;
	cursor: pointer;
	transform: scale(1.2, 1.2);
}
/*ここまでカレンダー*/

#topbutton {
   /* ▼ボタンの表示位置を画面の右下に固定 */
   position: fixed; /* ←表示場所を固定 */
   bottom: 18px;   /* ←下端からの距離 */
   right: 18px;    /* ←右端からの距離 */
   width: 5.5em;     /* ←横幅 */
   z-index: 5;
   /* ▼最初は非表示にしておく */
   display: none;

   /* ▼配色・配置・文字の装飾など */
   background-color: #00a0e9; /* ←背景色 */
   opacity: 0.70;        /* ←透明度 */
   border-radius: 24px;  /* ←角丸の半径 */
   text-align: center;  /* ←文字の位置 */
   font-size: 120%;     /* ←文字サイズ */
   font-weight: bold;   /* ←文字の太さ */
   margin: 0px;          /* ←外側の余白 */
   padding: 5px;       /* ←内側の余白 */
}
#topbutton a {
   /* ▼リンクの装飾 */
   color: white;          /* ←文字色 */
   text-decoration: none; /* ←下線なし */
}
#topbutton a:hover {
   /* ▼マウスが載ったときの装飾 */
   color: yellow;              /* ←文字色 */
   text-decoration: underline; /* ←下線あり */
}

/*ここからフッター*/
/*ここからライン*/
.footer_line{
	clear: both;
	width: 100%;
	height: 35px;
	padding-top: 10px;
}
.cyaan_line{
	width: 100%;
	height: 8px;
	background-color: #00a0e9;
	clear: both;
}
.magenta_line{
	width: 100%;
	height: 8px;
	background-color: #e4007f;
}
.yerrow_line{
	width: 100%;
	height: 8px;
	background-color: #fff100;
}
.brack_line{
	width: 100%;
	height: 8px;
	background-color: #000000;
}/*ここまでライン*/

#footer_container{ /*フッター　枠*/
	display: flex;
	justify-content:center;
	align-items:flex-start;
	width:900px;
	height: auto;
	margin: 20px auto;
}
#footer_Nav{/*フッターNav文字枠*/
	width: 20%;
	height: auto;
	margin-right: 100px;
}
#footer_Nav a{
	color: #000;
	text-decoration: none;
}
#footer_Nav ul li{/*フッターNav文字*/
	padding: 10px 0;
	text-decoration: none;
	border-bottom: dashed 0.8px #00a0e9;
}
#footer_form{ /*問合せと電話の囲み*/
	width: 25%;
	height: auto;
	padding: 10px 0px;
	margin-right: 100px;
}
.footer_Tel{/*お問合せの文字*/
	font-weight: bold;
	margin-bottom: 10px;
}
.footer_offce{
	margin-bottom: 10Px;
}
.footer_No{
	margin-bottom: 20px;
}
.footer_No a{
	font-size: 1.4rem;
	font-weight: bold;
	pointer-events: none;
	text-decoration: none;
	color: #000;
}
.footerLogo{
	width: 30%;
	height: auto;
	align-self: flex-end;
}

#copy{
	font-size: 0.7rem;
	text-align: center;
	padding: 20px 0px 10px 0px;
	background-color: rgb(243, 243, 243);
}